<template>
  <div :class="['teacher-student-list student-list',customClass]">
    <div v-for="(item,i) in students" :key="i" class="student-list-item">
      <view class="d-flex student-list-item-header">
        <div class="mr-auto d-flex pl-2 align-items-center">
          <img class="small-avatar" :src="item.avatar | avatarUrl" />
          <div class="student-user-info ml-1">
            <div>{{item.name}}</div>
            <div class="font-small">{{item.startStudyTime|date("yyyy-MM-dd")}}</div>
          </div>
        </div>
        <div class="d-flex  align-items-center  mr-1">
          <div class="ability-icon position-relative" @click="open(item.abilitys,item.job)">
            <img :src="'ability-icon.png'|imgUrl" alt="" >
          </div>
        </div>
      </view>
      <view class="d-flex justify-content-around align-items-center student-list-item-content">
        <div class="mr-auto" style="width:220px;">
          <div class="d-flex justify-content-around  p-2 text-center">
                  <div style="width:24%;">
              <h1 class="text-center pb-1" style="color:#E02020">{{item.pendingCount}}</h1>
              <div>待审核</div>
            </div>
            <div  class="border-left" style="width:24%;">
              <h1 class="text-center pb-1 " style="color:#E02020">{{item.unScoreCount}}</h1>
              <div>未打分</div>
            </div>
            <div class="border-left" style="width:24%">
              <h1 class="text-center pb-1">{{item.unCompleteTaskCount}}</h1>
              <div>未完成</div>
            </div>
            <div class="border-left" style="width:24%">
              <h1 class="text-center pb-1">{{item.completeTaskCount}}</h1>
              <div>已完成</div>
            </div>
          </div>
        </div>
        <div @click="toTasks(item.studentId,item.name)" class="border-button-active ml-auto d-flex align-items-center justify-content-center mr-1" >
          查看详情
        </div>
      </view>
    </div>

  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component
export default class StudentList extends Vue {
  @Prop(String) customClass;
  @Prop({ default: [] }) students;
  @Prop({ type: String, default: '' }) route;

  public async toTasks (studentId, name) {
    Megalo.navigateTo({
      url: this.route + '?id=' + studentId + '&name=' + name
    })
  }
  public open (abilitys, job) {
    this.$emit('getAction', abilitys, job)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped></style>
